<template>
    <div class="login_background">
        <van-form @submit="onSubmit" class="my-form">
            <h2>用户登录</h2>
            <van-cell-group inset>
                <van-field v-model="stuNo" name="stuNo" label="学号" placeholder="请输入学号"
                    :rules="[{ validator: checkstuno, message: '学号输入错误' }]" autocomplete="off" />
                <hr />
                <van-field v-model="passWord" type="password" name="passWord" label="密码" placeholder="请输入密码"
                :rules="[{ validator: checkpass, message: '请填写格式正确的密码' }]" autocomplete="off" />
            </van-cell-group>

            <div style="margin: 20px;">
                <van-button round block type="primary" native-type="submit">
                    点击登录
                </van-button>
            </div>
            <div class="center">
                <router-link to="/register">没有账号？点击前往注册</router-link>
                <!-- <van-button type="primary" to="/register">前往注册</van-button> -->
                <br>
                <router-link to="/home">返回首页</router-link>
            </div>
        </van-form>
    </div>
</template>
  
<script setup lang='ts'>
import { ref } from 'vue';
import { showToast } from 'vant';
import 'vant/es/toast/style';
import { useStore } from 'vuex';
import { useRouter,useRoute } from 'vue-router';
import $bus from "../config/eventBus";
import { onUnmounted,onMounted } from 'vue'
import { UserParams, loginUrl } from "../api/api"
const store = useStore()
const router = useRouter()
const route = useRoute()
const stuNo = ref<string>('');
const passWord = ref<string>('');
// 跳转到注册
const onClickTab = () => {
    router.push('/register/')
}
// 点击登录发送请求
const onSubmit = async (values: UserParams) => {
    // console.log('submit', values)
    const res = await loginUrl(values)
    let userId = res.data.id
    // showToast(res.data.pass)
    console.log(res,"555")
    // console.log(res.data.data.token,"222")
    showToast(res.data.msg)
    if (res.data.code === 0 || res.status === 200) {
        // 全局状态管理保存token
        store.commit("updateToken", res.data.data.token)
        localStorage.setItem('userName', res.config.data.userName)
        localStorage.setItem('stuNo', res.config.data.stuNo)
        window.localStorage.setItem("userid", userId) 
        router.push("/home")
        
        // router.push("/register")
    } else {
        return false
    }

};

//验证学号
const checkstuno = (val: string) => {
    //全是数字的学号
    return /^-?[1-9]\d*$/.test(val);
}
//验证密码
const checkpass = (val: string) => {
    //验证密码 6至15位的字母+数字
    return /^(?!\D+$)(?![^a-zA-Z]+$)\S{6,15}$/.test(val);
}
//登陆页不要tabBar
onMounted(() => {
    $bus.emit("tabBarHide", false);
})

//页面离开记得销毁
onUnmounted(() => {
    $bus.emit("tabBarHide", true);
})
</script>
<style scoped lang='scss'>
.login_background {
    height: 680px;
    background-image: url("https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202004%2F06%2F20200406193824_YUEEQ.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1672305371&t=ce4bc17c57a6cf027d2ec7063da4ba37");
}

// 注册居中
.center {
    text-align: center;
}

.my-form {
    padding-top: 250px;

    h2 {
        text-align: center;
        font-size: 21px;
        color: #666;
        // margin-bottom: 21px;
    }
}
</style>